<template>
  <div class="radar-chart-03 chart" ref="radarChart03"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const radarChart03 = ref(null);
const echarts = inject("$echarts");

let option = {
  compCode: "C202309066",
  title: {
    text: "分类雷达图",
  },
  radar: {
    indicator: [
      {
        name: "责任心",
        max: 100,
      },
      {
        name: "执行力",
        max: 100,
      },
      {
        name: "情商",
        max: 100,
      },
      {
        name: "沟通能力",
        max: 100,
      },
      {
        name: "合作性",
        max: 100,
      },
      {
        name: "影响力",
        max: 100,
      },
      {
        name: "学习能力",
        max: 100,
      },
      {
        name: "洞察力",
        max: 100,
      },
      {
        name: "开放性",
        max: 100,
      },
      {
        name: "成就导向",
        max: 100,
      },
      {
        name: "坚韧性",
        max: 100,
      },
    ],
    center: ["50%", "50%"],
    radius: "66%",
  },

  series: [
    {
      type: "radar",
      zlevel: 2,
      tooltip: {
        show: true,
        backgroundColor: '#053962', // 设置背景色为半透明红色
        borderColor: '#165e9e', // 设置边框颜色
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        },
      },
      lineStyle: {
        width: 1,
        opacity: 1,
      },
      data: [
        {
          value: [80, 80, 80, 80, 0, 0, 0, 0, 0, 0, 0],
        },
        {
          value: [0, 0, 0, 80, 80, 80, 80, 0, 0, 0, 0],
        },
        {
          value: [0, 0, 0, 0, 0, 0, 80, 80, 80, 80, 0],
        },
        {
          value: [80, 0, 0, 0, 0, 0, 0, 0, 0, 80, 80],
        },
      ],
    },
    {
      type: "sunburst",
      center: ["50%", "50%"],
      nodeClick: false,
      levels: [
        {},
        {
          r0: "80%",
          r: "90%",
        },
      ],
      data: [
        {
          name: "职场渴望（愿不愿意好好干）",
          value: 4,
          label: {
            position: "inside",
            rotate: "tangential",
          },
        },
        {
          name: "职场潜力（能干多好）",
          value: 4,
          label: {
            position: "inside",
            rotate: "tangential",
          },
        },
        {
          name: "职场协作（能不能持续地干好）",
          value: 4,
          label: {
            position: "inside",
            rotate: "tangential",
          },
        },
        {
          name: "职场基础（能不能干好）",
          value: 4,
          label: {
            position: "inside",
            rotate: "tangential",
          },
        },
      ],
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(radarChart03.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
